<!--  -->
<template>
  <transition name="fade">
    <div class="foodDetail" ref="foodDetailScroll" translate="fold">
      <div class="content">
        <!-- 头部图片 -->
        <div class="img-header">
          <img :src="clickFood.image" />
          <div class="return" @click="handleReturn">返回</div>
        </div>
        <!-- 中部标题 销售数据 价格 加入购物车按钮 -->
        <div class="title-content">
          <div class="content">
            <h1 class="title">{{clickFood.name}}</h1>
          <div class="desc">
            <span class="sellNum">月销售{{clickFood.sellCount}}份</span>
            <span class="praise">好评率{{clickFood.rating}}%</span>
          </div>

          <div class="price">
            <div class="now">
              <span class="now-icon">￥</span>
              <span class="now-price">{{clickFood.price}}</span>
            </div>
            <div class="old" >
              <span class="old-icon">￥</span>
              <span class="old-price">{{clickFood.oldPrice}}</span>
            </div>
          </div>

          <div class="add-shopCart" @click="addShopCart" v-show="!(clickFood.count > 0)">加入购物车</div>
          <!-- 从foodDetail中只能传一个Array的值给cartcontrol组件，但组件cartcontrol需要一个Object -->
          <div class="cartcontrol">
            <cartcontrol :food="clickFood"></cartcontrol>
          </div>
          </div>
        </div>
        <div class="block"></div>
        <!-- 商品介绍 -->
        <div class="good-desc">
          <p class="title">商品介绍</p>
          <p class="desc" v-show="clickFood.info">{{clickFood.info}}</p>
        </div>
        <div class="block"></div>
        <!-- 商品评价 -->

        <div class="food-eval">
          <h1 class="title">商品评价</h1>
          <ratingselect
            :ratings="clickFood.ratings"
            @selected="selectRating"
            @toggle="toggleContent"
            :selectType="selectType"
            :onlyContent="onlyContent"
            :desc="desc"
          ></ratingselect>
        </div>
        <split></split>
        <!-- 评价内容 -->
        <div class="eval">
          <ul v-show="clickFood.ratings && clickFood.ratings.length">
            <li
              v-show="needShow(item.rateType,item.text)"
              v-for="(item,index) in clickFood.ratings"
              :key="index"
            >
              <div class="eval-header">
                <div class="time">{{item['rateTime'] | formatDate}}</div>
                <div class="phone-icon">
                  <span>{{item['username']}}</span>
                  <span>
                    <img style="width:12px;height:12px" :src="item.avatar" alt />
                  </span>
                </div>
              </div>

              <div class="eval-content">
                <span
                  :class="{'icon-thumb_up':item.rateType===0,'icon-thumb_down':item.rateType===1}"
                ></span>
                <span class="content">{{item['text']}}</span>
              </div>
              <div class="block-1"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import cartcontrol from '@/components/cartcontrol/cartcontrol'
import ratingselect from '@/components/goods/ratingselect'
import split from '@/common/split'
import BScroll from 'better-scroll'
import Vue from 'vue'
import { formatRateData } from '@/common/formatData'
// const POSITIVE = 0
// const NEGATIVE = 1
const ALL = 2
export default {
  name: 'foodDetail',
  props: {
    food: Array,
    clickFood: Object
  },
  components: {
    cartcontrol,
    ratingselect,
    split
  },
  data () {
    return {
      showFoodDetail: true,
      selectType: ALL,
      onlyContent: false,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  filters: {
    formatDate (time) {
      return formatRateData(time)
    }
  },

  methods: {
    handleReturn () {
      // 可以回去购物车中的count值
      this.$emit('foodBack', this.clickFood)
      this.selectType = ALL
      this.onlyContent = false
    },
    addShopCart () {
      if (!this.clickFood.count) {
        Vue.set(this.clickFood, 'count', 1)
        this.showAddShopCart = false
      } else {
        this.clickFood.count++
      }
    },
    // 选择评论类型
    selectRating (type) {
      this.selectType = type
    },
    // 选择只显示有评论的内容
    toggleContent () {
      this.onlyContent = !this.onlyContent
    },
    needShow (type, text) {
      if (this.onlyContent && !text) {
        return false
      }
      if (this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    }
  },
  computed: {},
  mounted () {
    this.scroll = new BScroll(this.$refs.foodDetailScroll, {
      click: true
    })
  }
}
</script>
<style lang='stylus' scoped>
@import '../../common/stylus/mixin';

.block {
  width: 100%;
  height: 16px;
  background-color: #f3f5f7;
  border-top: 1px solid rgba(7, 17, 27, 0.2);
  border-bottom: 1px solid rgba(7, 17, 27, 0.2);
}

.block-1 {
  width: 100%;
  height: 1px;
  background-color: rgba(7, 17, 27, 0.2);
}

.foodDetail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  bottom: 48px;
  z-index: 30;
  background-color: #fff;

  &.fade-enter-active, &.fade-leave-active {
    transition: all 0.2s linear;
  }

  &.fade-enter, &.fade-leave-active {
    transform: translate3d(100%, 0, 0);
  }

  .img-header {
    position: relative;
    height: 0;
    padding-bottom: 75%;

    img {
      width: 100%;
      height: auto;
    }

    .return {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 50px;
      height: 20px;
      border-radius: 50px;
      background-color: #eee;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
    }
  }
}

.title-content {
  position relative
  width: 100%;
  .content{
    margin 18px
    .title {
    font-size: 14px;
    font-weight: 700;
    color: rgb(7, 17, 27);
    line-height: 14px;
    margin-bottom: 8px;
  }

  .desc {
    margin-bottom: 18px;
    font-size: 10px;
    color: rgb(147, 153, 159);
    line-height: 10px;
  }

  .price {
    display flex
    align-items flex-end

    .now {
      color: rgb(240, 20, 20);
      line-height: 24px;
      float: left;
      margin-right: 12px;

      .now-icon {
        font-size: 10px;
      }

      .now-price {
        font-size: 14px;
        font-weight: 700;
      }
    }

    .old {
      flex 1
      font-size: 10px;
      color: rgb(147, 153, 159);
      line-height: 24px;
      text-decoration: line-through;

      .old-icon {
        font-size: 10px;
      }

      .old-price {
        font-weight: 700;
      }
    }
  }

  .cartcontrol {
    position: absolute;
    right: 10px;
    bottom: 5px;
  }

  .add-shopCart {
    z-index: 1;
    position: absolute;
    right: 18px;
    bottom: 17px;
    box-sizing: border-box;
    width: 80px;
    height: 24px;
    text-align center
    font-size: 10px;
    color: #fff;
    line-height 24px
    border-radius: 12px;
    background-color: rgb(0, 160, 220);
  }
  }

}

.good-desc {
  // width 100%
  margin: 18px;

  .title {
    font-size: 14px;
    color: rgb(7, 17, 27);
    line-height: 14px;
    margin-bottom: 6px;
  }

  .desc {
    font-size: 12px;
    font-weight: 200;
    color: rgb(77, 85, 93);
    line-height: 24px;
    margin: 0 8px;
  }
}

.food-eval {
  margin-top: 18px;
  margin-left: 18px;

  .title {
    font-size: 14px;
    color: rgb(7, 17, 27);
    line-height: 14px;
    margin-top: 18px;
  }
}

.filter-evla {
  padding: 12px 0;

  .detil {
    line-height: 24px;
    font-size: 12px;
    color: rgb(147, 153, 159);
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

.eval {
  margin: 16px 18px;

  .eval-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgb(147, 153, 159);
    // line-height 12px
    margin-top: 16px;
    margin-bottom: 6px;

    .phone-icon {
      img {
        display: inline-block;
      }
    }
  }

  .eval-content {
    font-size: 12px;
    color: rgb(7, 17, 27);
    line-height: 16px;
    margin-bottom: 16px;

    .icon-thumb_up {
      color: rgb(0, 160, 220);
    }

    .icon-thumb_down {
      color: rgb(147, 153, 159);
    }
  }
}
</style>
